<template>
  <div class="tb">
    <mt-header fixed title="道路货物运输量专项调查" style="z-index: 999999;">
      <span slot="left" @click="goBack">
        <mt-button icon="back" slot="left">返回</mt-button>
      </span>
    </mt-header>
    <mt-field label="登录名称:" placeholder="请输入" type="text" v-model="name"></mt-field>
    <mt-field label="输入密码:" placeholder="请输入" type="password" v-model="password"></mt-field>
    <mt-field label="确认密码:" placeholder="请输入" type="password" v-model="confirmPassword"></mt-field>
    <mt-field
      label="企业所在地:"
      placeholder="请选择"
      type="text"
      @click.native.capture="getDataXzyh"
      v-model="companyAddress"
      :readonly="true"
    ></mt-field>
    <mt-field
      label="选择企业:"
      placeholder="请选择"
      type="text"
      @click.native.capture="getCompanyList"
      v-model="company.companyName"
      :readonly="true"
    ></mt-field>
    <mt-field label="车牌号码:" placeholder="请选择" type="text" v-model="vehicleNo">
      <span class="mui-icon mui-icon-arrowdown getcode" @click="getCarsList"></span>
    </mt-field>
    <mt-field label="车牌颜色:" placeholder="" type="text" v-model="plateColorCode"></mt-field>
    <mt-field label="手机号:" placeholder="请输入" type="number" v-model="mobilePhone"></mt-field>
    <mt-field label="验证码：" placeholder="请输入验证码" :disableClear="true" v-model="messageCode">
      <span v-if="yzflag" class="getcode">{{timemessage}}</span>
      <span v-if="!yzflag" @click="sendYZM" class="getcode">获取验证码</span>
    </mt-field>
    <div class="button">
      <mt-button type="primary" size="large" @click="commit">确定</mt-button>
    </div>
    <!-- 行政区划 -->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slots101" @change="onValuesChange" value-key="value" showToolbar>
        <mt-header title="选择省市区">
          <mt-button slot="left" class="cancle" @click="popupVisible = !popupVisible">取消</mt-button>
          <mt-button slot="right" class="sure" @click="sure">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>
    <!-- 企业选择 -->
    <mt-popup
      v-model="popupVisibleCompany"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="companyList" ref="companyPicker" value-key="companyName" showToolbar>
        <mt-header title="请选择企业">
          <mt-button
            slot="left"
            class="cancle"
            @click="popupVisibleCompany = !popupVisibleCompany"
          >取消</mt-button>
          <mt-button slot="right" class="sure" @click="companyConfirm">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>
    <!-- 车牌号码选择 -->
    <mt-popup
      v-model="popupVisibleCar"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="carslot" ref="carObj" value-key="vehicleNo" showToolbar>
        <mt-header title="请选择车牌号">
          <mt-button slot="left" class="cancle" @click="popupVisibleCar = !popupVisibleCar">取消</mt-button>
          <mt-button slot="right" class="sure" @click="vehicleNoConfirm">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>
    <!-- 车牌颜色 -->
    <!-- <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
      <mt-picker :slots="slots101" @change value-key="value" showToolbar>
        <mt-header title="选择省市区">
          <mt-button slot="left" class="cancle" @click="popupVisible = !popupVisible">取消</mt-button>
          <mt-button slot="right" class="sure" @click="sure">确定</mt-button>
        </mt-header>
      </mt-picker>
    </mt-popup>-->
  </div>
</template>
    
    <script>
import { Toast } from "mint-ui";
import { Checklist } from "mint-ui";
import { Field } from "mint-ui";
import CryptoJS from 'crypto-js'

export default {
  data() {
    return {
      recid: "",
      yhmlk: "",
      //省市县选择器 数据源
      slots101: [
        {
          flex: 1,
          values: [],
          className: "slot1",
          textAlign: "left",
          defaultIndex: 0
        },
        {
          flex: 1,
          values: [],
          className: "slot2",
          textAlign: "center",
          defaultIndex: 0
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "right",
          defaultIndex: 0
        }
      ],
      companyList: [
        {
          values: []
        }
      ], //企业列表
      name: "", // 姓名
      password: "", // 密码
      mobilePhone: "", // 手机号
      messageCode: "", // 验证码
      yhRecid: "", // 所选择企业的recid
      vehicleNo: "", //车牌号
      plateColorCode: "", // 车牌颜色
      confirmPassword: "", //确认密码
      companyAddress: "", // 单位所在地
      showToolbar: true,
      popupVisible: false, // 控制城市列表
      popupVisibleCompany: false, // 控制公司列表弹窗
      // 控制车牌号列表弹窗
      popupVisibleCar: false,
      company: {}, // 企业对象
      carslot: [
        {
          // 车辆信息数据源
          values: []
        }
      ],
      car: {}, // 车辆对象
      provinceValue: "",
      cityValue: "",
      countyValue: "",
      iosProvinces: "", //省列表
      iosCitys: "", //市列表
      iosCountys: "", //县列表
      countyCode: "", //行政区划 编码
      result: "",
      yzflag: true,
      timemessage: "获取验证码",
      seconds: 10,
      intervalId: "",
      changepassword: false,
      phoneyzm: ""
    };
  },
  created() {
    // console.log(this.$route.query.yhmlk);
  },
  mounted() {},
  watch: {
    mobilePhone(newVal) {
      if (newVal != null && newVal != "") {
        this.yzflag = false;
        this.stopTimes();
        this.seconds = 10;
      } else if (newVal == null || newVal.trim() == "") {
        this.stopTimes();
        this.newYzmMessage();
        this.seconds = 10;
        this.yzflag = true;
      }
    },
    seconds(newVal) {
      if (this.intervalId == null) {
        this.newYzmMessage();
      } else {
        this.oldYzmMessage();
      }
      if (newVal == 0) {
        this.stopTimes();
        this.seconds = 10;
        this.yzflag = false;
      }
    }
  },
  methods: {
    goBack() {
      //点击后退
      this.$router.go(-1);
    },
    commit() {
      var requrtnewpassword = this.set(
        this.confirmPassword,
        "CYDCxtaesmy2046j"
      );
      //var requrtnewpassword = this.confirmPassword;
      if (this.confirmPassword != this.password) {
        Toast("两次输入的密码不一致");
        return;
      }
      // var reuqstUserName = this.set(
      //   this.name,
      //   "CYDCxtaesmy2046j"
      // );
      var reuqstUserName = this.name;
      let data = {};
      data.name = reuqstUserName;
      data.password = requrtnewpassword;
      data.mobilePhone = this.mobilePhone;
      data.messageCode = this.messageCode;
      data.yhRecid = this.company.recid;
      data.vehicleNo = this.vehicleNo;
      data.plateColorCode = this.plateColorCode;
      console.log("shangchuan-->>" + JSON.stringify(data));
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/user/register",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          result => {
            console.log(result);

            if (result.data.status == "1000") {
              console.log("注册成功");
              console.log(result);
              this.goback();
            } else {
              Toast(result.data.msg);
            }
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    }, // 省市县筛选器值变化时调用
    // 省市县筛选器值变化时调用
    onValuesChange(picker, values) {
      var cityArray = [],
        countyArray = [];
      if (this.iosCitys.length > 0) {
      } else {
        return;
      }
      if (values[0]) {
        for (let i = 0; i < this.iosCitys.length; i++) {
          if (values[0].id == this.iosCitys[i].parentId) {
            cityArray.push(this.iosCitys[i]);
          }
        }
        picker.setSlotValues(1, cityArray);
      }

      if (values[1]) {
        for (let j = 0; j < this.iosCountys.length; j++) {
          if (values[1].id == this.iosCountys[j].parentId) {
            countyArray.push(this.iosCountys[j]);
          }
        }
        picker.setSlotValues(2, countyArray);
      }
      var result = this.result;

      if (typeof values[1] == "object" && typeof values[2] == "object") {
        result = values[0].value + values[1].value + values[2].value;
        this.provinceValue = values[0].value;
        this.cityValue = values[1].value;
        this.countyValue = values[2].value;
        this.countyCode = values[2].id;

        for (let i = 0; i < this.iosProvinces.length; i++) {
          if (this.iosProvinces[i].value == this.province) {
            this.first = i;
          }
        }
        for (let i = 0; i < cityArray.length; i++) {
          if (this.city == cityArray[i].value) {
            this.second = i;
          }
        }
        for (var j = 0; j < countyArray.length; j++) {
          if (this.county == countyArray[j].value) {
            this.third = j;
          }
        }
        this.slots101[0].defaultIndex = parseInt(this.first);
        this.slots101[1].defaultIndex = parseInt(this.second);
      } else if (typeof values[1] != "object" && typeof values[2] == "object") {
        values[1] = this.iosCitys;
        result = values[0].value + this.city + values[2].value;
        this.provinceValue = values[0].value;
        this.cityValue = this.city;
        this.countyValue = values[2].value;
        this.countyCode = values[2].id;
      }
      this.result = result;
    }, // 行政区划
    getDataXzyh() {
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");
          this.slots101[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;

          this.slots101[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slots101[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;

          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 行政区划  确定按钮
    sure() {
      var show = false;
      var result = this.result;
      var province = this.provinceValue;
      var city = this.cityValue;
      var county = this.countyValue;
      this.companyAddress = province + "-" + city + "-" + county;
      this.popupVisible = false;
      console.log(show, result, province, city, county, this.countyCode);
    },
    // 根据企业所在地的行政代码获取企业列表
    getCompanyList() {
      let data = {};
      data.xzqhCode = this.countyCode; // 企业所在地县级行政代码
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/user/getYhInfoList",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          response => {
            // console.log(JSON.stringify(response));
            if (response.data.status == "1000") {
              console.log('-->>'+JSON.stringify(response.data.data.yhmlkInfoList))
              this.companyList[0].values = response.data.data.yhmlkInfoList;
              // console.log("length-->>" + this.companyList[0].values.length);
              this.popupVisibleCompany = true;
            }
          },
          error => {
            console.log("getyhcars request error:" + error);
          }
        );
    }, // 企业选择事件
    companyConfirm() {
      let currentTags = this.$refs.companyPicker.getValues()[0];
      console.log(this.currentTags);
      this.company = currentTags;

      this.companyName = currentTags.companyName;
      this.popupVisibleCompany = false;
    },
    getCarsList() {
      let data = {};
      data.recid = this.company.recid; // 企业的recid
      console.log("this.code-->>" + this.recid);
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/user/getCarInfoList",
          { data: data },
          {
            headers: {
              "Content-Type": "application/json",
              mobileHeader:
                '{"sessionId":' + localStorage.getItem("sessionId") + "}"
            }
          }
        )
        .then(
          response => {
            console.log(JSON.stringify(response));
            if (response.data.status == "1000") {
              if(response.data.data.clmlkCarMessageList == ""){
                Toast("该企业无车辆号牌");
              } else {
                this.carslot[0].values = response.data.data.clmlkCarMessageList
                this.popupVisibleCar = true;
              }              
            }
          },
          error => {
            this.carslot[0].values = [
              {
                plateColorCode: "黄色",
                recid: "016B0E01DBEF3BB62CEB1A8BBB47B3B2",
                vehicleNo: "冀B7959A"
              }
            ];
            console.log("getyhcars request error:" + error);
          }
        );
    }, // 车牌号选择确认
    vehicleNoConfirm() {
      let currentTags = this.$refs.carObj.getValues()[0];
      console.log(this.currentTags);
      this.car = currentTags;
      this.vehicleNo = currentTags.vehicleNo;
      this.plateColorCode = currentTags.plateColorCode;
      this.popupVisibleCar = false;
    },
    // 获取短信验证码
    sendYZM() {
      this.oldYzmMessage();
      this.minusTimes();
      this.yzflag = true;
      this.axios
        .post(
          "http://zxdc.catsic.com:9090/sampling/code/sendmessagecode",
          { data: { mobilePhone: this.mobilePhone, useType: "0" } },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(result => {
          if (result.data.status == "1000") {
            this.changepassword = true;
            console.log(result);
            return;
          } else if (
            result.data.status == "4001" ||
            result.data.status == "5005" ||
            result.data.status == "1002"
          ) {
            this.dateFlag = true;
            this.sessionId = "";
            localStorage.setItem("sessionId", JSON.stringify(this.sessionId));
            this.$store.commit("outLogin");
            this.msg = result.data.msg;
            Toast(this.msg);
            this.$router.push({
              path: "/login"
            });
          } else {
            this.changepassword = false;
            Toast(result.data.msg);
            return;
          }
        });
    },
    oldYzmMessage() {
      this.timemessage = "重新发送(" + this.seconds + ")";
    },
    newYzmMessage() {
      this.timemessage = "获取验证码";
    },
    minusTimes() {
      //开始定时器
      this.intervalId = setInterval(() => {
        this.seconds = this.seconds - 1;
      }, 1000);
    },
    stopTimes() {
      // 停止定时器
      clearInterval(this.intervalId);
      // 每当清除了定时器之后，需要重新把 intervalId 置为 null
      this.intervalId = null;
    }, // 密码加密
    set(word, keyStr) {
      keyStr = keyStr ? keyStr : "CYDCxtaesmy2046j"; //16位的密钥，自己定义，和下面的密钥要相同
      var key = CryptoJS.enc.Utf8.parse(keyStr);
      var srcs = CryptoJS.enc.Utf8.parse(word);
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
      return encrypted.toString();
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
    
<style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
// 验证码
.getcode {
  width: 100px;
  height: 39px;
  line-height: 39px;
  position: absolute;
  top: -26px;
  text-align: center;
  right: 0;
}
</style>